<script setup lang="ts">
import {ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import {QuestionRequest} from "../../request/MyRequset";

let searchInput = ref<string>("")

const emit = defineEmits(['suc','err','clear'])
const props = withDefaults(defineProps<{
  //最大长度，单位为em
  width?:number
}>(),{
  width:25
})

const search = async ()=>{
  let searchRes = await QuestionRequest.search(searchInput.value)
  if(searchRes.suc){
    emit('suc',searchRes.data)
  }else{
    emit('err',searchRes.message)
  }
}

const input =  (val:string)=>{
  if(val == ""){
    emit("clear")
  }
}

</script>

<template>
  <div :style="{'width':width+'em'}" class="searchQuestion">
    <el-form-item class="item" label="搜索题目">
      <el-input @input="input" clearable v-model="searchInput" placeholder="搜索内容、标签、发布者">
        <template #append>
          <el-button :icon="Search" @click="search"/>
        </template>
      </el-input>
    </el-form-item>
  </div>
</template>

<style scoped lang="scss">
.searchQuestion{
  display: flex;
  flex-direction: column;
  .item{
    //margin-top: 4px;
  }
}
</style>